<template>
  <div>
    <div :id="id" class="mychart"></div>
  </div>
</template>

<script>
  export default {
    props: {
      id: {
        type: String,
        default: ''
      },
    },
    methods: {
      /**
       {
              name: '直接访问',
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
       * @param title
       * @param yData
       * @param series
       */
      renderChart(title, yData, series) {
        let myChart = this.$echarts.init(document.getElementById(this.id));
        let legendData = [];
        for (let i in series) {
          legendData.push(series[i].name);
        }
        let option = {
          title: {
            text: title,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: legendData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: yData
          },
          series: series
        };
        // 绘制图表
        myChart.setOption(option);
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .mychart {
    width: 100%;
    height: 30rem;
  }
</style>
